#discuss {
  margin: 40px 0 20px 0;

  & > .vssue {
    .vssue-comments {
      .vssue-comment {
        .vssue-comment-avatar {
          img {
            border-radius: 50% !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
          }
        }

        .vssue-comment-footer {
          .vssue-comment-reactions {
            .vssue-comment-reaction {
              color: @primary-color !important;
            }
          }
        }

        .vssue-comment-footer {
          .vssue-comment-operations {
            color: @primary-color !important;
          }
        }

        &.vssue-comment-edit-mode {
          .vssue-comment-main {
            border-color: @primary-color !important;
            box-shadow: 0 0 1px 1px lighten(@primary-color, 20%) !important;
          }
        }
      }
    }

    .vssue-pagination {
      .vssue-pagination-select {
        padding: 0 8px !important;
        border: 1px solid hsv(0, 0, 85%) !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        color: #666666 !important;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
        background-image: none !important;

        &:focus {
          box-shadow: 0 0 0 2px lighten(@primary-color, 20%) !important;
          border-color: @primary-color !important;
        }
      }

      .vssue-pagination-link:not(.disabled) {
        color: @primary-color !important;
      }
    }

    .vssue-icon {
      fill: @primary-color !important;
    }

    .vssue-status {
      color: @primary-color !important;
    }

    .vssue-notice {
      .vssue-progress {
        background-color: @primary-color !important;
      }

      .vssue-alert {
        color: @primary-color !important;
        border: 2px solid lighten(@primary-color, 42%) !important;
        background-color: lighten(@primary-color, 44%) !important;
      }
    }

    .vssue-button {
      padding: 0 15px !important;
      height: 32px !important;
      line-height: 30px !important;
      border: 1px solid hsv(0, 0, 85%) !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015) !important;
      color: #666666 !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;

      &:hover,
      &:focus {
        color: @primary-color !important;
        border-color: @primary-color !important;
      }

      &:disabled {
        color: hsv(0, 0, 85%) !important;

        &:hover {
          border-color: inherit !important;
        }
      }
    }

    .vssue-new-comment {
      .vssue-new-comment-input {
        background-color: unset !important;

        &:focus {
          border-color: lighten(@primary-color, 44%) !important;
          box-shadow: 0 0 1px 1px lighten(@primary-color, 42%) !important;
        }
      }

      .vssue-comment-avatar {
        img {
          border-radius: 50% !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        }
      }
    }

    &:not(.vssue-comment-content) {
      a {
        color: @primary-color !important;
      }
    }
  }

  #valine {
    .vwrap {
      .vheader {
        .vinput {
          &:focus {
            border-bottom-color: @error-color;
          }
        }
      }

      .vcontrol {
        svg {
          display: none;
        }

        button {
          color: #ffffff;
          background-color: @primary-color;
          border-color: @primary-color;

          &:hover,
          &:focus {
            background-color: @primary-color-5;
            border-color: @primary-color-5;
          }
        }
      }

      .vmark {
        .valert {
          .vbtns {
            button {
              &:hover,
              &:active {
                color: @primary-color;
                border-color: @primary-color;
              }
            }
          }
        }
      }
    }

    .vlist {
      .vcard {
        .vh {
          .vhead {
            .vnick {
              color: @primary-color;

              &:hover {
                color: @primary-color-5;
              }

              &:before {
                background: none;
              }
            }

            span {
              display: none;
            }
          }

          .vmeta {
            .vat {
              color: @error-color;
            }
          }
        }
      }
    }

    .vpage {

      button {
        color: #ffffff;
        background-color: @primary-color;
        border-color: @primary-color;

        &:hover,
        &:focus {
          background-color: @primary-color-5;
          border-color: @primary-color-5;
        }
      }
    }

    .info {
      .power {
        a {
          &:hover {
            color: @primary-color;
          }
        }
      }
    }

    .vloading {
      &:before {
        border: 6px double @primary-color;
      }
    }

    a {
      &:before {
        background: none;
      }
    }
  }
}

body.dark {
  #discuss {
    & > .vssue {
      color: @dark-text-color;

      .vssue-button {
        color: @dark-text-color !important;
        border-color: @dark-text-color !important;
      }

      .vssue-header {
        border-bottom-color: @dark-text-color-10;
      }

      .vssue-body {
        .vssue-new-comment {
          border-bottom-color: @dark-text-color-10;

          .vssue-new-comment-input {
            border-color: @dark-text-color-10;

            &:focus {
              border-color: @dark-text-color-9 !important;
              box-shadow: 0 0 1px 1px @dark-text-color-9 !important;
            }
          }
        }
      }
    }

    #valine {
      * {
        color: @dark-text-color;
      }

      .vwrap {
        border-color: @dark-text-color-10;

        .vheader {
          .vinput {
            border-bottom-color: @dark-text-color-10;
          }
        }

        .vmark {
          .valert {
            .vcode {
              background-color: @dark-bg-color;
            }
          }
        }
      }

      .vbtn {
        background: @dark-bg-color;
      }

      .vlist {
        .vcard {
          .vh {
            border-bottom-color: @dark-text-color-10;
          }

          .vquote {
            border-left-color: @dark-text-color-10;
          }

          .vcontent {
            &.expand {
              &:before {
                background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), @dark-text-color-10);
              }

              &:after {
                color: @dark-text-color-8;
                background: @dark-text-color-10;
              }
            }
          }
        }
      }
    }
  }
}
